<template>
  <div class="g-button" :style="buttonStyle" @click="handleClick">
    <div class="g-button-body" :title="tip" :style="buttonTextStyle">
      {{ text }}
    </div>
    <div
      class="g-button-border"
      :class="{
        'border-rotate': rotate,
      }"
      :style="borderStyle"
    />
  </div>
</template>
<script setup lang="ts">
import { transUnit } from "@/utils/common";
const props = defineProps({
  // 按钮文字
  text: {
    type: String,
    default: "",
  },
  // 字体颜色
  color: {
    type: String,
    default: "#fff",
  },
  // 字体大小
  size: {
    type: [String, Number],
    default: "12",
  },
  // 加粗
  bold: {
    type: [String, Number],
    default: "700",
  },
  // 悬浮提示文字
  tip: {
    type: String,
    default: "",
  },
  // 按钮宽度
  width: {
    type: [String, Number],
    default: "200",
  },
  // 按钮高度 值过大可能会导致样式异常
  height: {
    type: [String, Number],
    default: "35",
  },
  // 边框线宽度
  border: {
    type: [String, Number],
    default: "2",
  },
  // 按钮圆角
  radius: {
    type: [String, Number],
    default: "33",
  },
  // 边框线颜色
  borderColor: {
    type: String,
    default:
      "linear-gradient(90deg, rgba(64, 163, 251, 1) 0%, rgba(41, 227, 180, 1) 100%)",
  },
  // 边框线旋转
  rotate: {
    type: Boolean,
    default: true,
  },
  // 边框线旋转速度
  rate: {
    type: [Number, String],
    default: 2,
  },
  // 按钮背景色
  background: {
    type: String,
    default: "transparent",
  },
  // 是否使用rem单位
  rem: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["click"]);

// 按钮样式
const buttonStyle = computed(() => {
  return {
    width: transUnit(props.width, props.rem),
    height: transUnit(props.height, props.rem),
    borderRadius: transUnit(props.radius, props.rem),
  };
});

// 按钮文字样式
const buttonTextStyle = computed(() => {
  return {
    background: props.background,
    top: transUnit(props.border, props.rem),
    left: transUnit(props.border, props.rem),
    right: transUnit(props.border, props.rem),
    bottom: transUnit(props.border, props.rem),
    borderRadius: transUnit(props.radius, props.rem),
    color: props.color,
    fontSize: transUnit(props.size, props.rem),
    fontWeight: props.bold,
  };
});

// 边框样式
const borderStyle = computed(() => {
  return {
    background: props.borderColor,
    width: `calc(${transUnit(props.width, props.rem)} + 40px)`,
    height: `calc(${transUnit(props.width, props.rem)} + 40px)`,
    top: `calc(-${transUnit(props.width, props.rem)} / 2 - 20px)`,
    animation: props.rotate ? `rotate ${props.rate}s linear infinite` : "none",
  };
});

// 点击事件
const handleClick = () => {
  emit("click");
};
</script>
<style lang="scss" scoped>
.g-button {
  position: relative;
  overflow: hidden;
  user-select: none;
  &-body {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    &:hover {
      cursor: pointer;
    }
  }
  &-border {
    position: absolute;
    left: -20px;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
